<template>
	<view class="box">
		<view class="top">
			<u-subsection bgColor='#ff6040' :list="list" @change="sectionChange" :current="curNow"></u-subsection>
		</view>
		<!-- 商品列表有数据时  显示给用户的页面 -->
		<view v-if="goodslist.length>0">
			<view v-for="(item,index) in goodslist" :key="item.id" class="goodsSelect">
				<u-swipe-action>
					<u-swipe-action-item @click='selete(item.id,index)' :options="options1">
						<view class="swipe-action u-border-top u-border-bottom">
							<view class="swipe-action__content">
								<!-- 多选按钮 -->
								<u-checkbox-group @change="select(item)">
									<u-checkbox :checked="item.checked" class='chekbox' shape="square">
									</u-checkbox>
								</u-checkbox-group>


								<!-- 商品信息 -->
								<view class="goodsinfo">
									<view class="img">
										<image class="img" :src="imgurl + item.img" mode=""></image>
									</view>

									<view class="">
										<view class="">
											{{item.goodsname}}
										</view>
										<view class="row2">
											10x10
										</view>
										<view class="row3">
											降价:399.00
										</view>
										<view class="row3">
											¥<text class="price">{{item.price}}</text>
											<text class="older_price">¥123.oo</text>
										</view>
									</view>
								</view>
								<!-- 步进器 -->
								<!-- <u-number-box class='num' button-size="20" v-model="item.num" @change="valChange"> -->
								</u-number-box>
								<u-number-box button-size="20" class='num'>
									<view slot="minus" @click="load(item.id,index)" class="minus">
										<u-icon name="minus" size="12"></u-icon>
									</view>
									<text slot="input" style="width: 50px;text-align: center;"
										class="input">{{item.num}}</text>
									<view slot="plus" @click="add(item.id,index)" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view>
								</u-number-box>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>


		<!-- 商品列表为空时  显示给用户的页面 -->
		<view v-else>
			<u-empty width="100%" height="100%" textSize='40' iconSize='100' mode="car"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="bottom_l">
				<u-checkbox-group @change="Allchecked">
					<u-checkbox :checked="checkedall" shape="square" label="全选"></u-checkbox>
				</u-checkbox-group>
				<view class="priceAll">
					合计金额：{{allPrice}}
				</view>
			</view>

			<view @click="submit()" class="indent">
				去结算
			</view>
		</view>
	</view>
</template>

<script>
	import user from '../../common/userinfo.js'
	// 引入封装好的接口
	import {
		cartList,
		cartDelete,
		addCart,
		Indent
	} from '@/request/app.js'
	export default {
		data() {
			return {
				// 顶部选择分类
				list: ['全部', '降价', '常卖', '分类'],
				current: 1,
				curNow: '',
				// 删除按钮
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				goodslist: [], // 购物车列表
				checkedall: false, // 全选状态
				imgurl: this.$imgUrl // 图片地址拼接
			}
		},
		computed:{
			// 合计金额
			allPrice() {
				let sum = 0
				this.goodslist.map(item => {
					if (item.checked) {
						sum += item.price * item.num
					}
				})
				console.log(sum);
				return sum.toFixed(2)
			}
		},
		methods: {
			// 购物车列表
			List() {
				// 判断用户登陆的话 就调用购物车列表接口，  没有登陆就跳转登陆
				if (uni.getStorageSync('userinfo')) {
					cartList({
							uid: user.uid,
						})
						.then(res => {
							console.log(res, '购物车列表');
							if (res.data.code == 200) {
								// 如果接口有数据，就存入数据， 没有 就是空数组
								this.goodslist = res.data.list ? res.data.list : []
								this.goodslist.map(item => {
									//利用$set() 去赋值, 可以实现数据响应
									this.$set(item, "checked", false)
								})
							}
							console.log(this.goodslist, '列表属性');
						})
				} else {
					// 给用户提示 模态框
					uni.showModal({
						title: '用户未登录',
						content: '',
						confirmText: '前往登录',
						cancelText: '不去',
						// 成功响应的
						success(res) {
							// 用户点击确认按钮 就条状到登录页面
							if (res.confirm) {
								// 跳转登录页面
								uni.navigateTo({
									url: '../xmxLogin/xmxLogin'
								})
							} else if (res.cancel) {  // 点击取消按钮 跳回道首页
								// 跳转登录页面
								uni.switchTab({
									url: '../home/home'
								})
							}

						}
					})

				}

			},

			// 顶部选择分类
			sectionChange(index) {
				this.curNow = index;
			},
			// 单选事件
			select(item) {
				item.checked = !item.checked
				this.checkedall = this.goodslist.every(item => item.checked)
			},

			// 全选控制单选事件
			Allchecked() {
				this.checkedall = !this.checkedall
				this.goodslist.map((item) => {
					item.checked = this.checkedall
					console.log(this.checkedall, '全选');
				})
			},

			


			// 删除事件
			selete(id, index) {
				// this.goodslist.splice(index, 1)
				// 调用购物车删除接口
				cartDelete({
						id
					})
					.then(res => {
						console.log(res, '删除响应');
						//在删除的时候后端会返回结果列表，直接重新赋值即可 如果没有，就重新加载列表
						// 调用封装好的方法
						this.List()
					})
			},


			// 添加数量
			add(id, index) {
				// 调用增加接口
				// 点击的商品 数量加 一
				this.goodslist[index].num++
				// 调用接口传参
				addCart({
						id,
						type: 2
					})
					.then(res => {
						console.log(res, '购物车增加数量');

					})
			},

			// 减少数量
			load(id, index) {
				// 调用增加接口
				// 点击的商品 数量减 1
				this.goodslist[index].num--
				// 判断 数量小于一  就 给提示
				if (this.goodslist[index].num < 1) {
					this.goodslist[index].num = 1
					disableMinus: false
					uni, uni.showToast({
						title: '最少添加一个',
						icon: 'error'
					});
					// 结束逻辑
					return
				}
				// 调用接口 传参数
				addCart({
						id,
						type: 1
					})
					.then(res => {
						console.log(res, '购物车减少数量');

					})
			},

			// 提交 生成订单事件
			submit() {
				// 首先用户至少选择一件商品结算
				if (this.goodslist.some(item => item.checked)) {
					// 获取用户购买的数量
					let num = 0;
					// 用户选中商品的  商品id
					let val = '';
					// 用户选择的商品列表
					let arr = [];
					this.goodslist.map((item) => {
						if (item.checked) {
							// 计算商品数量
							num += item.num;
							// id
							val += `,${item.id}`;
							//  // 把选中的商品 添加到空数组 arr 中
							arr.push(item);
						}
					});
					console.log(arr, '用户选中商品的列表');
					// 定义一个对象接收必传参数
					let orderInfo = {
						countmoney: this.allPrice,
						countnumber: num,
						idstr: val.slice(1),
					};
					// 把必传参数集合存储在本地中
					uni.setStorageSync('orderInfo', orderInfo);
					//把选中的购物车列表数组加入到会话存储中
					uni.setStorageSync('arr', arr);
					uni.navigateTo({
						url: '../order/order'
					})
				} else {
					uni.showToast({
						title: '最少选择一样商品结算',
						icon: 'error'
					})
				}
			}
		},

		onLoad() {
			this.List()
		},
		onShow() {
			this.List()
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #dedede;
		margin-bottom: 80px;
		padding-bottom: 5px;
		box-sizing: border-box;

		.minus {
			width: 22px;
			height: 22px;
			border-width: 1px;
			border-color: #E6E6E6;
			@include flex;
			justify-content: center;
			align-items: center;
			background-color: #FF0000;
		}

		.input {
			// padding: 0 10px;
		}

		.plus {
			width: 22px;
			height: 22px;
			background-color: #FF0000;
			// border-radius: 50%;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
		}

		.top {
			background-color: tomato;
		}

		.goodsSelect {
			margin-bottom: 10px;
			position: relative;
		}

		.swipe-action__content {
			display: flex;
			justify-content: space-between;

			.chekbox {
				margin-left: 5px;
			}

			.num {
				margin-top: 100px;
				position: absolute;
				right: 10px;
				bottom: 45px;
			}

			.goodsinfo {
				display: flex;

				.img {
					width: 120px;
					height: 120px;
					margin-right: 10px;
				}

				.row2 {
					color: #999;
					margin: 5px 0;
				}

				.row3 {
					color: red;

					.price {
						font-size: 20px;
					}

					.older_price {
						color: #999;
						text-decoration: line-through;
					}
				}
			}
		}



		// 删除单元格
		.u-page {
			padding: 0;
		}

		.u-demo-block__title {
			padding: 10px 0 2px 15px;
		}

		.swipe-action {
			&__content {
				padding: 30rpx 0;

				&__text {
					font-size: 15px;
					color: $u-main-color;
					padding-left: 30rpx;
				}
			}
		}

		.bottom {
			width: 100%;
			height: 80px;
			line-height: 80px;
			position: fixed;
			bottom: 50px;
			z-index: 999;
			padding: 10px;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.bottom_l {
				display: flex;

				.priceAll {
					margin-left: 10px;
				}
			}

			.indent {
				width: 120px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background-color: tomato;
				color: #fff;
			}
		}
	}
</style>
